<template>
  <ReviewModel
    v-if="meetingData?.length > 0"
    :lists="meetingData"
    :meetingBegin="meetingBegin"
    @backTemplate="backTemplate"
  ></ReviewModel>
  <div v-else>
    <el-card class="mb">
      <div class="title mb">会议列表</div>
      <el-form :inline="true" label-width="100px" :model="form">
        <el-form-item label="会议名称：">
          <el-input
            v-model="form.meetingName"
            placeholder="请输入"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="会议时间：">
          <el-date-picker
            v-model="form.meetingTime"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="会议类型：">
          <el-select v-model="form.type">
            <el-option
              v-for="item in typeList"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="会议状态：">
          <el-select v-model="form.generateState">
            <el-option
              v-for="item in statusList"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-row
      style="min-height: calc(100vh - 230px)"
      v-if="cardList && cardList.length > 0"
    >
      <div class="cardStyle" v-loading="loading">
        <el-card v-for="item in cardList" :key="item.id" class="meetingCard">
          <div
            :class="
              item.generateState != '2' ? 'status' : 'status status-finish'
            "
          >
            {{ item.generateStateDesc }}
            <i
              class="el-icon-delete delMeeting"
              v-if="item.generateState === '0'"
              @click="delMeeting(item.id)"
            ></i>
          </div>
          <el-row>
            <el-col :span="4">
              <div>
                <img src="../../assets/img/computer.svg" alt="" />
              </div>
            </el-col>
            <el-col :span="20">
              <div class="name">会议名称：{{ item.meetingName }}</div>
              <div class="time">会议时间：{{ item.meetingTime }}</div>
              <div class="person">会议负责人：{{ item.masterUserName }}</div>
              <div class="type">会议类型：{{ item.typeDesc }}</div>
            </el-col>
          </el-row>
          <div
            :class="
              item.generateState === '0'
                ? 'btnGroup '
                : 'btnGroup btnGroup-finish'
            "
          >
            <el-button
              type="text"
              v-if="item.generateState === '0' && !onlyLook"
              @click="startMeeting(item.id)"
              >开始会议</el-button
            >
            <el-button
              type="text"
              v-if="item.generateState != '2'"
              @click="previewMeeting(item.id)"
              >预览</el-button
            >
            <!-- <el-button
              type="text"
              v-if="item.generateState === '2'"
              @click="previewHistory(item)"
              >存档</el-button
            > -->
            <el-button type="text" @click="previewFile(item)"
              >会议纪要</el-button
            >
          </div>
        </el-card>
      </div>
    </el-row>
    <el-empty
      v-else
      description="暂无数据"
      style="height: calc(100vh - 240px)"
    ></el-empty>
    <el-pagination
      ref="pagination"
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNum"
      :page-sizes="[12, 24, 36, 48]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
    <file-table ref="fileTable"></file-table>
  </div>
</template>

<script>
import {
  findMeetingByGenerate,
  beginMeeting,
  previewMeetingList,
  deleteMeetingById
} from '@/apis/meetingList.js'
import { getDetailByAccountOrId, getUserInfo, getSelf } from '@/apis/Common.js'
import ReviewModel from '../meetingConfiguration/bigModel.vue'
import FileTable from './components/FileTable.vue'
import { getRealToken } from '@/utils/util'

export default {
  components: { ReviewModel, FileTable },
  data() {
    return {
      form: {
        meetingName: '',
        meetingTime: '',
        type: '',
        generateState: ''
      },
      loading: false,
      total: 0,
      pageSize: 12,
      pageNum: 1,
      onlyLook: false,
      typeList: [
        { name: '月度会议', code: '0' },
        { name: '季度会议', code: '1' },
        { name: '年度会议', code: '2' },
        { name: '临时会议', code: '3' }
      ],
      statusList: [
        { name: '待开始', code: '0' },
        { name: '进行中', code: '1' },
        { name: '已结束', code: '2' }
      ],
      cardList: [],
      tableData: [],
      loading: false,
      meetingData: [],
      meetingBegin: false,
      historyUrl: ''
    }
  },
  mounted() {
    this.getData()
    this.getUserRole()
  },
  methods: {
    async getUserRole() {
      try {
        const accessObj = getRealToken()
        const isCheckOut = accessObj?.isCheckOut
        let res = null
        if (isCheckOut) {
          const resInfo = await getSelf()
          res = await getUserInfo(resInfo.tenantId)
        } else {
          res = await getDetailByAccountOrId({
            account: sessionStorage.getItem('currentUser')
              ? JSON.parse(sessionStorage.getItem('currentUser')).account
              : null
          })
        }
        if (res?.role?.roleCode?.length > 0) {
          const roleCode = res.role.roleCode.split('|')
          const arr = roleCode
            .map((roleCode) =>
              ['hygczmkcy-gcy', 'hygczmkjt-gcy'].indexOf(roleCode)
            )
            .filter((index) => index !== -1)
          if (arr.length > 0) {
            this.onlyLook = true
          } else {
            this.onlyLook = false
          }
        } else {
          this.onlyLook = true
        }
      } catch (error) {
        this.onlyLook = true
      }
    },
    getData() {
      this.loading = true
      const { pageNum, pageSize } = this
      findMeetingByGenerate({ ...this.form, pageNum, pageSize })
        .then((res) => {
          if (res.code === 200) {
            this.cardList = res.data.list
            this.total = res.data.total
          }
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    },
    backTemplate() {
      this.meetingData = []
      this.getData()
    },
    search() {
      this.pageNum = 1
      this.getData()
    },
    reset() {
      this.form = this.$options.data().form
      this.search()
    },
    async startMeeting(id) {
      let res = await beginMeeting({ id })
      if (res.code === 200) {
        if (res.data.length > 0) {
          this.meetingData = res.data
          this.meetingBegin = true
        } else {
          this.$message.warning(
            '未获取到会议数据，不可开始会议，请配置后再开始！'
          )
        }
      } else {
        this.$message.warning(res.data || '开始会议失败！')
      }
    },
    async previewMeeting(id) {
      let res = await previewMeetingList({ id })
      if (res.code === 200 && res.data.length > 0) {
        this.meetingData = res.data
        this.meetingBegin = false
      } else {
        this.$message.warning('未获取到会议数据，不可预览，请配置后再预览！')
      }
    },
    previewFile(row) {
      this.$refs.fileTable.show(row, true)
    },

    // previewHistory(row) {
    //   this.$refs.fileTable.show(row, false)
    // },
    delMeeting(id) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          let res = await deleteMeetingById({ id })
          console.log(res)
          if (res.code === 200) {
            this.$message.success('删除成功!')
            this.getData()
          } else {
            this.$message.warning(res.data || '删除失败!')
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.getData()
    },
    handleCurrentChange(val) {
      this.pageNum = val
      this.getData()
    }
  }
}
</script>

<style lang="less" scoped>
::v-deep {
  .delMeeting {
    display: inline-block;
    width: 30px;
    text-align: center;
    cursor: pointer;
  }
  .title {
    font-size: 20px;
    font-weight: bold;
    display: block;
  }
  .mb {
    margin-bottom: 15px;
  }
  .cardStyle {
    display: flex;
    flex-wrap: wrap;
    max-height: calc(100vh - 240px);
    overflow: auto;
    .meetingCard {
      width: 380px;
      height: 180px;
      position: relative;
      padding-bottom: 50px;
      margin: 10px 15px;
      .status {
        position: absolute;
        top: 0;
        right: 0;
        padding: 5px 10px;
        background-color: rgb(226 241 255);
        color: #1890ff;
        &-finish {
          color: #686f7a;
          background: #f2f2f1;
        }
      }
      .el-col-4 {
        padding-top: 10px;
        div {
          margin: auto;
          width: 50px;
          height: 50px;
          border-radius: 50%;
          background: #e7f3ff;
          display: flex;
          align-items: center;
          justify-content: center;
          img {
            width: 20px;
            height: 20px;
          }
        }
      }
      .el-col-20 {
        padding-left: 10px;
        .name {
          font-weight: bold;
          line-height: 34px;
          font-size: 16px;
        }
        .time,
        .person,
        .type {
          line-height: 24px;
        }
      }
      .btnGroup {
        height: 40px;
        display: flex;
        position: absolute;
        align-items: center;
        bottom: 0;
        left: 0;
        width: 100%;
        background: #f7f9fa;
        .el-button {
          width: 33%;
          padding: 12px;
        }
        &-finish {
          .el-button {
            // width: 50%;
            width: 100%;
          }
        }
      }
    }
  }
  .el-pagination {
    position: relative;
    .el-pagination__total {
      position: absolute;
      left: 0;
    }
  }
}
</style>
